window.addEventListener('load', function () {
    // 获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');
    // 获取focus的宽度
    var w = focus.offsetWidth;
    // 利用定时器开启轮播图片
    var index = 0;
    var flag = false;
    var timer = setInterval(function () {
        index++;
        transition();
    }, 2000);

    ul.addEventListener('transitionend', function () {
        // 无缝滚动
        if (index >= 3) {
            index = 0;
            // 调用none函数
            none();

        } else if (index < 0) {
            index = 2;
            // 调用none函数
            none();
        }
        // 小圆点变化
        // 1.先移除li里面带类名的这个类
        ol.querySelector('.current').classList.remove('current');
        // 2.在给当前索引号的li添加这个类
        ol.children[index].classList.add('current');
    });
    // 手指滑动轮播图
    var strartX = 0;
    var moveX = 0;
    ul.addEventListener('touchstart', function (e) {
        // 获取手指的初始化坐标
        strartX = e.targetTouches[0].pageX;
        clearInterval(timer);
    })
    ul.addEventListener('touchmove', function (e) {
        moveX = e.targetTouches[0].pageX - strartX;
        var lateX = -index * w + moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + lateX + 'px)';
        flag = true; // 如果用户手指移动过，我们再做判断，否则不做判断
        e.preventDefault();
    })
    ul.addEventListener('touchend', function (e) {
        if (flag) {
            if (Math.abs(moveX) >= 50) {
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                transition();
            } else {
                transition();
            }
        }
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            transition();
        }, 2000);
    })



    // 函数封装
    function none() {
        ul.style.transition = 'none';
        var lateX = -index * w;
        // 引引加加后面的单位被需给后面的引号挨边
        ul.style.transform = 'translateX(' + lateX + 'px)';
    }

    function transition() {
        var lateX = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + lateX + 'px)';
    }
    // 返回顶部

    // jQuery写法
    $(function () {
        var boxTop = $("nav").offset().top;
        $(window).scroll(function () {
            // $(document).scrollTop();
            if ($(document).scrollTop() >= boxTop) {
                $(".goBack ").fadeIn();
            } else {
                $(".goBack ").fadeOut();
            }
            $(".goBack ").click(function () {
                $("body,html").stop().animate(
                    {
                        scrollTop: 0
                    }
                )
            })
        })
    })


    // JS写法
    // var goBack = document.querySelector('.goBack');
    // var nav = document.querySelector('nav');
    // window.addEventListener('scroll', function () {
    //     if (window.pageYOffset >= nav.offsetTop) {
    //         goBack.style.display = 'block';
    //     } else {
    //         goBack.style.display = 'none';
    //     }
    // })

    // goBack.addEventListener('click', function () {
    //     //     window.scroll(0, 0)
    //     animate(window, 0);

    // })


})